﻿<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>武杰五子棋</title>
</head>
<style type="text/css">
body{ background:#6b6b6b;}
#canvas{ display:block; margin:20px auto; background:white;}
#box{ position:absolute; left:100px; top:200px;}
</style>
<body>
<canvas id="canvas" width="450px" height="450px"></canvas>
<script type="text/javascript">

//定义属性
var map = [];
var step = 0;
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var color = ["black","white"];

//map初始化
function init(){
	context.strokeStyle = "black";
	step = 0;
	context.strokeStyle = "black";
	for(var i=0;i<14; i++){
		map[i] = [];
		for(var j = 0;j < 14; j++){
			map[i][j] = 0;
		}
	}
}

//划线
function drawLine() {
	for(var i = 1; i < 15; i++) {
		context.moveTo(30*i, 30);
		context.lineTo(30*i, 420);
		context.moveTo(30, 30*i);
		context.lineTo(420, 30*i);
	}
	context.stroke();
}
drawLine();

//画棋子
function drawChess(x,y,color) {
	context.beginPath();
	context.fillStyle = color;
	context.arc(x, y, 15, 0, Math.PI*2);
	context.fill();
	context.stroke();
}

//判断胜负
/*先判断一条线上的连续颜色>=5 包括左边和右边
1.当x+i<0 跳出循环 从当前位置向左判断
2.从当前位置向左判断
3.右边颜色一样才num++
4.颜色一样才num++
5.当 x-i<0 跳出循环

6.返回num

7.从当前位置向右判断
8.直线判断结束

9 其他同理 不过是 边界问题
*/

function vectory(x, y, color) {
	var num = 0;
	var result = 0;//记录满足条件的棋子数
	//左右判断
	var lightRight = right(x, y, color, num);//返回右边同色的个数
	lightRight += left(x, y, color, num);//加上左边同色的个数
	//上下判断
	var upDown = up(x, y, color, num);
	upDown += down(x, y, color, num);
	//左下右上
	var leftDownToRightUp = leftDown(x, y, color, num);
	leftDownToRightUp += rightUp(x, y, color, num);
	//左上右下
	var leftUpToRightDwon = leftUp(x, y, color, num);
	leftUpToRightDwon += rightDown(x, y, color, num);

	if(lightRight >= 4 || upDown >= 4 ||leftDownToRightUp >= 4|| leftUpToRightDwon >= 4) {
		alert(color+"方胜利");
		location.reload(true);//刷新页面
	}
};

//向右边判断
function right(x, y, color, num){
	for(var i = 1; i < 5; i++) {
		if(x + i > 13){ //判断边界问题 不到边界就可以一直判断
			break;
		}
		else{
			if(map[x+i][y]==color) {
				num++;
			}
			else {
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
};

//向左边判断
function left(x, y, color, num){
	for(var i = 1; i < 5; i++) {
		if(x - i < 0){ //判断边界问题 不到边界就可以一直判断
			break;
		}
		else{
			if(map[x - i][y] == color) {
				num++;
			}
			else {
				 break;
			}
		}
	}
	return num;//返回一行左边同色的个数
}

//向上判断
function up(x, y, color, num) {
	for(var i = 1; i < 5; i++) {
		if(y - i < 0) { //判断边界问题 不到边界就可以一直判断
			break;
		}
		else {
			if(map[x][y-i]==color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}

//向下判断
function down(x, y, color, num) {
	for(var i = 1; i < 5; i++) {
		if(y + i > 13) { //判断边界问题 不到边界就可以一直判断
			break;
		}
		else {
			if(map[x][y + i] == color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}

//左下判断 
function leftDown(x, y, color, num) {
	for(var i = 1; i < 5; i++) {
		if(x - i < 0) { //判断边界问题 不到边界就可以一直判断
			break;
		}
		else if(y+i>13){
			break;
		}
		else {
			if(map[x-i][y+i]==color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}


//右上判断
function rightUp(x, y, color, num) {
	for(var i = 1;  i < 5; i++){
		if(y - i < 0) { //判断边界问题 不到边界就可以一直判断
			break;
		}
		else if(x + i > 13) {
			break;
		}
		else{
			if(map[x + i][y - i] == color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}


//左上判断
function leftUp(x, y, color, num) {
	for(var i = 1;i < 5; i++) {
		if(x - i < 0){ //判断边界问题 不到边界就可以一直判断
			break;
		}
		else if(y-i<0) {
			break;
		}
		else{
			if(map[x-i][y-i]==color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}

//右下判断
function rightDown(x, y, color, num) {
	for(var i=1;i<5;i++){
		if(x+i>13) { //判断边界问题 不到边界就可以一直判断
			break;
		}
		else if(y+i>13) {
			break;
		}
		else{
			if(map[x+i][y+i]==color) {
				num++;
			}
			else{
				break;
			}
		}
	}
	return num;//返回一行右边同色的个数
}

//canvas下棋监听器
canvas.addEventListener("click", function(e) {
	var dx = Math.round(e.offsetX/30)*30; // 瞄准位置 只能在(30*x,30*y)位置上
	var dy = Math.round(e.offsetY/30)*30; // 瞄准位置
	var reX = (dx/30) - 1; // 通过坐标位置映射棋盘数组中的位置
	var reY = (dy/30) - 1;
	console.log(reX + ',' + reY);
	if(dx == 0||dx == 450||dy == 0||dy == 450) {
		return;
	}
	if(map[reX][reY] == 0) {
		drawChess(dx, dy, color[step%2]);
		map[reX][reY] = color[step%2];
		vectory(reX, reY, color[step%2]);
		step++;
		console.log(map);
	}
});
init();

</script>
</body>
</html>